<template>
  <div>
    <Alert banner closable type="warning" show-icon>
        <span style="color:#fa7c00;font-size:18px;">警告</span> 
        <template slot="desc">经数据融合分析平台报告，队伍智能化管理系统未提供量化考评得分数据，干部绩效考评系统提供的数据已于2019-06-01正式过期，因此，贵阳市消防支队所有人员的效能评估数据自2019年6月后，均有不准确的情况出现，如需查阅历史效能数据，建议使用2019年1月至2019年4月之间作为评估时间段。我们将配合消防支队尽快督促队伍智能化管理系统和干部绩效考评系统的承建单位提供实时数据，对您使用的不便我们深感歉意</template>
        </Alert>
    <Row class="banner">
      <h1>效能评估报告</h1>
      <h2>查看贵阳市消防支队所有人员的效能评估报告</h2>
    </Row>
    <Row class="row" :gutter="16" type="flex" justify="start">
      <Col span="6">
        <Card style="margin-bottom:12px;">
          <p slot="title">评估时间区间</p>
          <CellGroup>
            <Cell title="选择评估对象" style="padding:18px 0">
              <Cascader :data="userList" v-model="userName" slot="extra" style="width:235px;"></Cascader>
            </Cell>

            <Cell title="选择评估时间" style="padding:18px 0">
              <Date-picker
                type="month"
                @on-change="handleDate"
                style="width:235px;"
                placeholder="点击选择要评估的月份"
                slot="extra"
              ></Date-picker>
            </Cell>
          </CellGroup>
          <Divider />
          <Button type="primary" @click="renderView" style="width:100px;">刷新</Button>
        </Card>
        <Card style="margin-bottom:12px;">
          <p slot="title">
            <span>综合效能评估情况</span>
          </p>
          <div class="chart" id="chart-score-halo"></div>
          <Divider />
          <span class="text" style="color:red;font-weight:bold">综合效能最终得分：{{effScore}}</span>
          <Spin fix size="large" v-show="loading.scoreHalo"></Spin>
        </Card>
        <Card>
          <p slot="title">效能分析指数</p>
          <div class="chart" id="chart-eff-radar"></div>
          <Divider />
          <Spin fix size="large" v-show="loading.effRadar"></Spin>
        </Card>
      </Col>
      <Col span="18">
        <Card style="margin-bottom:12px;">
          <p slot="title">业务能力情况</p>

          <Table :columns="capacity.TableColumns" :data="capacity.TableData"></Table>
          <Divider />
          <Page
            show-evelator
            :total="capacity.pageCount"
            :page-size="capacity.pageSize"
            @on-change="renderCapacityTable"
          ></Page>
          <Spin fix size="large" v-show="loading.capacityTable"></Spin>
        </Card>
        <Card style="margin-bottom:12px;">
          <p slot="title">工作压力情况</p>
          <Table :columns="pressure.TableColumns" :data="pressure.TableData"></Table>
          <Divider />
          <Page
            show-evelator
            :total="pressure.pageCount"
            :page-size="pressure.pageSize"
            @on-change="renderPressureTable"
          ></Page>
          <Spin fix size="large" v-show="loading.pressureTable"></Spin>
        </Card>
        <Card>
          <p slot="title">响应速度情况</p>
          <Table :columns="response.TableColumns" :data="response.TableData"></Table>
          <Divider />
          <Page
            show-evelator
            :total="response.pageCount"
            :page-size="response.pageSize"
            @on-change="renderResponseTable"
          ></Page>
          <Spin fix size="large" v-show="loading.responseTable"></Spin>
        </Card>
      </Col>
    </Row>
  </div>
</template>

<script>
import axios from "axios";
export default {
  name: "",
  data() {
    return {
      userList: [],
      userName: [],
      loading: {
        scoreHalo: false,
        effRadar: false,
        capacityTable: false,
        pressureTable: false,
        responseTable: false
      },
      effScore: 0,
      effDetail: {
        capacity: 0,
        pressure: 0,
        response: 0
      },
      effExt: {
        redGrade: 0,
        depResult: 0,
        amountResult: 0
      },
      date: null,
      option: {
        scoreHalo: null,
        effRadar: null
      },
      capacity: {
        TableColumns: [
          {
            title: "序号",
            key: "index",
            align: "center",
            width: 80
          },
          {
            title: "考评内容",
            key: "examContent",
            align: "center"
          },
          {
            title: "考试人员",
            key: "examAttender",
            align: "center"
          },
          {
            title: "考试时间",
            key: "examTime",
            align: "center"
          },
          {
            title: "考评得分",
            key: "examScore",
            align: "center"
          }
        ],
        TableData: [],
        pageCount: 0,
        pageSize: 10
      },
      pressure: {
        TableColumns: [
          {
            title: "序号",
            key: "index",
            align: "center",
            width: 80
          },
          {
            title: "事项名称",
            key: "taskName",
            align: "center"
          },
          {
            title: "事项开始时间",
            key: "taskTime",
            align: "center"
          }
        ],
        TableData: [],
        pageCount: 0,
        pageSize: 10
      },
      response: {
        TableColumns: [
          {
            title: "序号",
            key: "index",
            align: "center",
            width: 80
          },
          {
            title: "事项名称",
            key: "taskName",
            align: "center"
          },
          {
            title: "要求完成时间",
            key: "requireFinishTime",
            align: "center"
          },
          {
            title: "实际完成时间",
            key: "actualFinishTime",
            align: "center"
          }
        ],
        TableData: [],
        pageCount: 0,
        pageSize: 10
      }
    };
  },
  methods: {
    getDefaultMonth() {
      let now = new Date();
      let dateString = `${now.getFullYear()}-${
        now.getMonth() < 10 ? "0" + now.getMonth() : now.getMonth()
      }-01`;
      return dateString;
    },
    handleDate(date) {
      this.date = date;
    },
    renderView() {
        this.calculateEffDetail()
        this.renderCapacityTable(0)
        this.renderPressureTable(0)
        this.renderResponseTable(0)
    },
    renderScoreHalo() {
      let effIndexVal = ((this.effDetail.capacity + this.effDetail.response + this.effDetail.pressure) / 3).toFixed(2)
      this.option.scoreHalo = {
        tooltip: { show: true, trigger: "item", formatter: "{b}:{c}" },
        legend: {
          itemWidth: 12,
          itemHeight: 12,
          orient: "horizontal",
          top: "top",
          left: "center",
          data: ['效能指数','干部绩效考评','政治教育考评','队管云量化考评'],
          textStyle: { fontSize: 12 }
        },
        color: this.COLORS,
        series: [
          {
            name: "效能评估构成",
            type: "pie",
            radius: "55%",
            center: ["50%", "60%"],
            data: [{
                name:'效能指数',value:effIndexVal
            },{
                name:'干部绩效考评',value:this.effExt.depResult
            },{
                name:'政治教育考评',value:this.effExt.redGrade
            },{
                name:'队管云量化考评',value:this.effExt.amountResult
            }],
            itemStyle: {
              normal: {
                shadowOffsetX: 3,
                shadowOffsetY: 3,
                shadowBlur: 7,
                shadowColor: "#00000033"
              }
            },
            label: {
              normal: {
                show: true,
                position: "outside",
                fontSize: 12,
                formatter: "{b}\n{c}分"
              }
            }
          }
        ]
      };
      this.effScore = ((parseFloat(effIndexVal) + this.effExt.depResult + this.effExt.redGrade + this.effExt.amountResult)/3).toFixed(2)
      this.$Crender('chart-score-halo',this.option.scoreHalo)
      this.loading.scoreHalo = false
    },
    renderEffRadar() {
     
      this.option.effRadar = {
        tooltip: {
          show: true
        },
        radar: {
          shape: "rect",
          nameGap: 20,
          indicator: [
            { name: "业务能力", max: 100 },
            { name: "工作压力", max: 100 },
            { name: "响应速度", max: 100 }
          ]
        },
        dataset: {
          source: []
        },
        series: [
          {
            type: "radar",
            radarIndex: 0,
            name: "效能指数构成",
            label: { show: true }
          }
        ]
      };
      this.option.effRadar.dataset.source = [
        ["业务能力", "工作压力", "响应速度"],
        [
          this.effDetail.capacity,
          this.effDetail.pressure,
          this.effDetail.response
        ]
      ];
      this.$Crender("chart-eff-radar", this.option.effRadar);
      this.loading.effRadar = false;
    },
    calculateEffDetail() {
      this.loading.scoreHalo = true
      this.loading.effRadar = true  
      var counter = 0;
      //业务能力以及三项考试分数的计算
      axios
        .get(this.URLHEAD_DVS + "BusinessAbilityGrade", {
          params: {
            startTime: this.date + "-01",
            Name: this.userName[1],
            GroupName: this.userName[0]
          }
        })
        .then(res => {
          let json = res.data;
          let dimension = 0;
          if (json.Data[0].RedGradeRemark) {
            dimension++;
            this.effExt.redGrade = json.Data[0].RedGrade || 0;
          }
          if (json.Data[0].DepResultRemark) {
            dimension++;
            this.effExt.depResult = json.Data[0].DepResult || 0;
          }
          if (json.Data[0].AmountResultRemark) {
            dimension++;
            this.effExt.amountResult = json.Data[0].AmountResult || 0;
          }
          this.effDetail.capacity = parseInt(json.Data[0].Hundred || 0)
          counter++
          if(counter === 3){
              this.renderScoreHalo()
              this.renderEffRadar()
          }
        });
        //工作压力计算
      axios.get(this.URLHEAD_DVS + 'WorkPressure',{
          params:{
              startTime:this.date + '-01',
              Name:this.userName[1],
              GroupName:this.userName[0]
          }
      }).then(res=>{
          let json = res.data
          this.effDetail.pressure = parseInt(json.Data[0].Hundred || 0)
          counter ++
          if(counter ===3){
              this.renderScoreHalo()
              this.renderEffRadar()
          }
      })
      //响应速度计算
      axios.get(this.URLHEAD_DVS + 'OnTimeWorkGrade',{
          params:{
              startTime:this.date + '-01',
              Name:this.userName[1],
              GroupName:this.userName[0]
          }
      }).then(res=>{
          let json = res.data
          this.effDetail.response = parseInt(json.Data[0].Hundred || 0)
          counter ++
          if(counter ===3){
              this.renderScoreHalo()
              this.renderEffRadar()
          }
      })
    
    },
    renderCapacityTable(index) {
      this.loading.capacityTable = true;
      let params = {
        startTime: this.date + "-01",
        Name: this.userName[1],
        GroupName: this.userName[0],
        pageIdex: index,
        pageSize: this.capacity.pageSize
      };
      axios
        .get(this.URLHEAD_DVS + "BusinessGradeDetail", { params: params })
        .then(res => {
          let json = res.data;
          this.capacity.TableData = json.Data.map((o, i) => {
            return {
              index: i + 1,
              examContent: o.ExamType,
              examAttender: o.Name,
              examTime: o.ExamDate,
              examScore: o.Score
            };
          });
          this.capacity.pageCount = json.count;
          this.loading.capacityTable = false
        });
    },
    renderPressureTable(index) {
        this.loading.pressureTable = true
        let params = {
            startTime:this.date + '-01',
            Name:this.userName[1],
            GroupName:this.userName[0],
            pageIndex:index,
            pageSize:this.pressure.pageSize
        }
        axios.get(this.URLHEAD_DVS + 'GetWorkPressure',{params:params}).then(res=>{
            let json = res.data
            this.pressure.TableData = json.Data.map((o,i)=>{
                return {
                    index:i+1,
                    taskName:o.Sourse,
                    taskTime:o.OperateTime
                }
            })
            this.pressure.pageCount = json.count
            this.loading.pressureTable = false
        })
    },
    renderResponseTable(index) {
        this.loading.responseTable = true
        let params = {
            startTime:this.date +'-01',
            Name:this.userName[1],
            GroupName:this.userName[0],
            pageIndex:index,
            pageSize:this.response.pageSize
        }
        axios.get(this.URLHEAD_DVS + 'OnTimeWorkGradeDetaile',{params:params}).then(res=>{
            let json = res.data
            this.response.TableData = json.Data.map((o,i)=>{
                return {
                    index:i+1,
                    taskName:o.TypeName,
                    requireFinishTime:o.EndTime,
                    actualFinishTime:o.FinishTime
                }
            })
            this.response.pageCount = json.count
             this.loading.responseTable = false
        })
    }
  },
  created() {
    this.date = this.getDefaultMonth();
    this.userList = [];
    this.userName = ["南明大队", "齐峰"];
    var $this = this;
    axios.get(this.URLHEAD_DVS + "GetFireTreeList").then(res => {
      let json = res.data;
      this.userList = json.Data;
      this.userList.forEach((o, i) => {
        o.children = o.children.map((x, y) => {
          return {
            value: x,
            label: x,
            depname: o.label
          };
        });
      });
      
    });
    this.$No
  },
  mounted() {
      this.renderView()
  }
};
</script>

<style lang="" scoped>
.chart {
  height: 350px;
}

.toolbar .item {
  min-width: 300px;
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
}

.toolbar .text {
  min-width: 100px;
  flex-grow: 0;
}
</style>